<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.7.1.min.js"></script>
    <style>
        .box{
            width:200px;
            height:200px;
            background-color:lightblue;
        }
        .box1{
            width:200px;
            height:200px;
            background-color:lightcoral;
        }
        .box2{
            background-color:lightseagreen;
        }

    </style>
</head>
<body>

    <div class='box'></div>
    <div class='container'></div>

    <div class="box1"></div>
    <div class="box2"></div>

    <script>

        // 通过css()方法获取css样式
        var color = $('.box').css('background-color')
        console.log(color)

        $('.container').css({
            'width':'300px',
            'height':'300px',
            'background-color':'lightgreen'
        })

        // 获取box1的宽度和高度
        var width = $('.box1').width();
        var height = $('.box1').height();
        console.log('width:'+width)
        console.log('height:'+height)
        // 设置box2的宽度和高度
        $('.box2').width(200).height(200)

    </script>
</body>
</html>